iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
Modern Web

以 React 為主的那些前端事系列 第 28

Day 28 - styled-components 筆記3

  • 分享至 

  • xImage
  •  

Q_Q ..

對預設建立的 component 延伸自訂樣式

import styled from "styled-components";

const Button = styled.button`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

const BlueButton = styled(Button)`
  color: blue;
  border-color: blue;
`;

export default function App() {
  return (
    <section className="App">
      <Button>Normal Button</Button>
      <BlueButton>BlueButton</BlueButton>
    </section>
  );
}


上一篇
Day 27 - styled-components 筆記2
下一篇
Day 29 - styled-components 筆記4
系列文
以 React 為主的那些前端事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

1
juck30808
iT邦研究生 1 級 ‧ 2021-10-14 12:10:36

恭喜即將邁入完賽~/images/emoticon/emoticon08.gif

我要留言

立即登入留言